<template>
  <div class="dashboard">
    <trialView @toRegister="handleRegister"/>
    <div class="section1">
      <div class="pageCon" >
          <h4 class="title" :class="!title1 ? '' : 'animate__animated animate__fadeInDown'">打造企业专属私域流量招聘平台</h4>
        <div class="flex-center-xs" :class="!section1? '': 'animate__animated animate__fadeInLeft'">
          <div v-for="(item, index) in recruitArr" :key="index" class="card flex-column">
            <img :src="item.img" alt="" width="156" height="117">
            <div class="card-title">{{item.title}}</div>
            <div class="card-text">{{item.text}}</div>
          </div>
        </div>
      </div>
    </div>
    <div class="section2" >
      <div class="pageCon">
        <h4 class="title" :class="!title2 ? '' : 'animate__animated animate__fadeInDown'">全招聘生命周期管理</h4>
        <el-tabs ref="navTabs" :class="!section2 ? '' : 'animate__animated animate__fadeInLeft'" v-model="activeName" @tab-click="handleClick">
          <el-tab-pane
            ref="nav"
            v-for="(item) in recruitLifeArr" 
            :key="item.label"
            :label="item.label" 
            :name="item.name"
          >
            <template #label >
              <div class="tab flex-column" @mouseover="mouseover($event, item)" >
                <img :src="item.img" alt="" width="49" height="49">
                <div class="tab-text">{{item.label}}</div>
              </div>
            </template>
            
          </el-tab-pane>
        </el-tabs>
        <RecruitCon :key="activeName" :componentName="activeName"/>
      </div>
    </div>
    <div class="section3" >
      <div class="pageCon">
        <h4 class="title" :class="!title3 ? '' : 'animate__animated animate__fadeInDown'">成功客户案例</h4>
        <div class="example" :class="!section3 ? '' : 'animate__animated animate__fadeInRight'">
          <div class="example-box">
            <div class="example-box-con" >
              <div class="flex-center-xs" :class="{marquee_left:leftAnimate, marquee_right:rightAnimate}">
              <div v-for="(item, index) in emampleArr" :key="index" class="card flex-column">
                <div class="imgBox" @click="playerVideo(item)" @mouseover="mouseoverExample($event, item)" @mouseout="mouseoutExample($event, item)">
                  <div class="imgBox-animate">
                    <img :src="item.coverImage" alt="" width="381" height="316" 
                      class="example-img"
                      >
                    <img src="../../assets/images/index/player2.png" alt="" width="65" height="65" class="player-btn">
                  </div>
                </div>
                <div class="card-con flex-column">
                  <div class="card-con-title">{{item.title}}</div>
                  <div class="company-logo">
                    <img :src="item.companyLogo" alt="" width="50" height="50">
                  </div>
                </div>
              </div>
              </div>
            </div>
          </div>
          <div class="toggle-btn flex-xs">
            <img src="../../assets/images/index/left.png"  alt="" width="44" height="44" @click="toggleVideo('left')">
            <img src="../../assets/images/index/right.png"  alt="" width="44" height="44" @click="toggleVideo('right')">
          </div>
        </div>
        <div class="video-box flex-center">
          <img 
            v-show="showVideo"
            src="../../assets/images/index/close_circle.png" 
            alt="" 
            width="44" 
            height="44" 
            @click="closeVideo" 
            class="close-video mouse-cursor">
          <video
              v-show="showVideo"
              class="video-js"
              :autoplay="true"
              controls
              width="1142"
              height="675"
          >
            <source
              src="../../assets/video.mp4"
              type="video/mp4"
            >
          </video>
          <img 
            src="../../assets/images/index/video.png" 
            alt="" 
            width="1268" 
            height="797"
            @click="player"
            class="mouse-cursor"
          >
        </div>
      </div>
    </div>
    <div class="section4">
      <div class="pageCon">
        <h4 class="title" :class="!title4 ? '' : 'animate__animated animate__fadeInDown'">获取专属顾问</h4>
        <div class="title-other">请填写真实信息，我们将有专属顾问在1个工作日内联系您</div>
        <div class="flex-center" :class="!section4 ? '' : 'animate__animated animate__fadeInRight'">
          <el-form
            ref="ruleForm"
            :model="ruleForm"
            :rules="rules"
            label-width="120px"
            class="demo-ruleForm"
          >
          <div class="form-box flex-center">
            <div class="formCon">
              <el-form-item prop="userName">
                <el-input v-model.trim="ruleForm.userName" placeholder="请输入您的姓名" maxlength="50"></el-input>
              </el-form-item>
              <el-form-item prop="companyName">
                <el-input v-model.trim="ruleForm.companyName" placeholder="请输入您的企业名称" maxlength="50"></el-input>
              </el-form-item>
              <el-form-item prop="jobTitle">
                <el-input v-model.trim="ruleForm.jobTitle" placeholder="请输入您的职位" maxlength="50"></el-input>
              </el-form-item>
              <el-form-item prop="phone">
                <el-input v-model.trim="ruleForm.phone" placeholder="请输入您的手机号名"></el-input>
              </el-form-item>
            </div>
            <div class="customer">
              <img src="../../assets/images/index/recruit/customer2.png" alt="" width="256" height="326">
            </div>
          </div>
          <div class="flex-center">
            <el-form-item>
              <div class="registerBtn mouse-cursor" @click="submitForm('ruleForm')">免费试用</div>
            </el-form-item>
          </div>
            
          </el-form>
        </div>
      </div>
    </div>
    <Register ref="register" @registerSuccess="handleSuccess"/>
    <RegisterSrccess ref="success"/>
    <videoPlay ref="videoPlay" :videoSrc="playVideo"/>
  </div>
</template>
<script>
// import { mapGetters } from 'vuex'
import {
  ref,
  onMounted
} from "vue";
import trialView from '@/components/trialView/index'
import RecruitCon from './components/recruit.vue'
import Register from '@/components/register/index.vue'
import RegisterSrccess from '@/components/register/success.vue'
import videoPlay from '@/components/video/index.vue'
import { validPhone } from '@/utils/validate'
import {queryNewsList, trialApplySubmit} from '@/api/register.js'
import { ElMessage } from 'element-plus'
export default {
  name: 'app',
  components: {
    trialView,
    RecruitCon,
    Register,
    RegisterSrccess,
    videoPlay
  },
  data () {
    const validatePhone = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入手机号码'))
      }
      else if (!validPhone(value)) {
        callback(new Error('请输入正确的手机号码'))
      } else {
        callback()
      }
    }
    return {
      section1: false,
      title1: false,
      section2: false,
      title2: false,
      section3: false,
      title3: false,
      section4: false,
      title4: false,
      recruitArr: [
        {
          img: require('@/assets/images/index/4.png'),
          title: '全员招聘',
          text: '激发员工社交人脉，倡导全员招聘，招聘面广，增加员工额外收入。'
        },
        {
          img: require('@/assets/images/index/2.png'),
          title: '降本增效',
          text: '员工入职率高，工作稳定，省掉大量劳务中介费用，一个月入职10人，即可支付全年软件成本。'
        },
        {
          img: require('@/assets/images/index/1.png'),
          title: '品牌打造',
          text: '企业可以自定义平台名称与LOGO,图片、文字、视频多样化展示，打造企业专属招聘平台。'
        },
        {
          img: require('@/assets/images/index/3.png'),
          title: '私域流量',
          text: '平台可以关联公众号与嵌入官网,打造招聘矩阵。独立管理后台，打造企业私域流量库。'
        }
      ],
      activeName: 'recruit1',
      recruitLifeArr:[
        {
          label: '职位管理',
          name: 'recruit1',
          img: require('@/assets/images/index/recruit1.png')
        },
        {
          label: '裂变招聘',
          name: 'recruit2',
          img: require('@/assets/images/index/recruit2.png')
        },
        {
          label: '投递简历',
          name: 'recruit3',
          img: require('@/assets/images/index/recruit3.png')
        },
        {
          label: '候选人管理',
          name: 'recruit4',
          img: require('@/assets/images/index/recruit4.png')
        },
        {
          label: '激励政策',
          name: 'recruit5',
          img: require('@/assets/images/index/recruit5.png')
        },
        {
          label: '奖励发放',
          name: 'recruit6',
          img: require('@/assets/images/index/recruit6.png')
        }
      ],
      emampleArr: [
         {
          img: require('@/assets/images/index/example/example_9.png'),
          title: '鹏翔保安',
          logo: require('@/assets/images/index/example/logo9.png'),
        },
        {
          img: require('@/assets/images/index/example/example_1.png'),
          title: '鹏翔保安',
          logo: require('@/assets/images/index/example/logo1.png'),
        },
        {
          img: require('@/assets/images/index/example/example_2.png'),
          title: '鹏翔保安',
          logo: require('@/assets/images/index/example/logo2.png'),
        },
        {
          img: require('@/assets/images/index/example/example_3.png'),
          title: '鹏翔保安',
          logo: require('@/assets/images/index/example/logo3.png'),
        },
        {
          img: require('@/assets/images/index/example/example_4.png'),
          title: '鹏翔保安',
          logo: require('@/assets/images/index/example/logo4.png'),
        },
        {
          img: require('@/assets/images/index/example/example_5.png'),
          title: '鹏翔保安',
          logo: require('@/assets/images/index/example/logo5.png'),
        },
        {
          img: require('@/assets/images/index/example/example_6.png'),
          title: '鹏翔保安',
          logo: require('@/assets/images/index/example/logo6.png'),
        },
        {
          img: require('@/assets/images/index/example/example_7.png'),
          title: '鹏翔保安',
          logo: require('@/assets/images/index/example/logo7.png'),
        },
        {
          img: require('@/assets/images/index/example/example_8.png'),
          title: '鹏翔保安',
          logo: require('@/assets/images/index/example/logo8.png'),
        },
       
      ],
      ruleForm: {
        userName: '',
        companyName: '',
        jobTitle: '',
        phone: '',
      },
      rules: {
        userName: [
          {
            required: true,
            message: '请输入姓名',
            trigger: 'blur',
          }
        ],
        companyName: [
          {
            required: true,
            message: '请输入企业名称',
            trigger: 'blur',
          }
        ],
        jobTitle: [{
            required: true,
            message: '请输入职位',
            trigger: 'blur',
          }],
        phone:[{
            required: true,
            validator: validatePhone,
            trigger: 'blur',
          }],
      },
      showVideo: false,
      leftAnimate: false,
      rightAnimate: false,
      playVideo: ''
    }
  },
  setup () {
    
  },
  mounted () {
     window.addEventListener('scroll', this.handleScroll)
     this.getData()
  },
  destroyed(){
      window.removeEventListener('scroll', this.handleScroll);
  },
  methods: {
   handleScroll () {
      var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
      console.log('首页》',scrollTop)
      if (scrollTop > 20 && scrollTop < 200) { 
        this.title1 = true 
      }else if (scrollTop > 200 && scrollTop < 700) {
        this.section1 = true
      } else if (scrollTop > 700 && scrollTop < 800) {
        this.title2 = true
      }else if (scrollTop > 800 && scrollTop < 1800) {
        this.section2 = true
      } else if (scrollTop > 1800 && scrollTop < 2000) {
        this.title3 = true
      }else if (scrollTop > 2000 && scrollTop < 3500) {
        this.section3 = true
      }else if (scrollTop > 3500 && scrollTop < 3600) {
        this.title4 = true
      } else if (scrollTop > 3700 ) {
        this.section4 = true
      }
    },
    handleClick(tab, event) {
      console.log(tab, event)
    },
    mouseover(e, data) {
      console.log(data.name)
      this.activeName = data.name
    },
   
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          trialApplySubmit(this.ruleForm).then(res => {
            if (res.data.bizCode == 'SUCCESS' && res.data.respCode == '00000') {
              this.handleSuccess()
            }else {
              ElMessage.error(res.data.bizMsg)
            }
          })
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    handleRegister () {
      this.showRegister()
    },
    showRegister () {
      this.$refs.register.show()
    },
    handleSuccess () {
      this.$refs.success.show()
    },
    player() {
      this.showVideo = true
    },
    closeVideo() {
      this.showVideo = false
    },
    toggleVideo(type) {
      if (type === 'right') {
        this.leftAnimate = true
        setTimeout(() => {
          this.emampleArr.push(this.emampleArr[0])
          this.emampleArr.shift()
          this.leftAnimate = false
        }, 500)
      } else {
          this.rightAnimate = true
          setTimeout(() => {
            this.emampleArr.unshift(this.emampleArr[this.emampleArr.length - 1])
            this.emampleArr.pop()
            this.rightAnimate = false
          }, 500)
      }
    },
    playerVideo (data) {
      this.playVideo = data.caseVideo
      this.$refs['videoPlay'].show()
    },
    addActiveExample(e) {
       e.currentTarget.className = 'example-img animate__animated animate__pulse'
    },
    removeActiveExample(e) {
      e.currentTarget.className = 'example-img'
    },
     getData (){
        let params = {
          companyId: '123',
          userId: '456',
          type: 'case'
      }
      queryNewsList(params).then(res=> {
        this.emampleArr = res.data.respData.list.map(item => {
          return {
            hover:false,
            ...item
          }
        })
        console.log('成功案例',this.emampleArr)
      })
    },
    mouseoverExample (e, data) {
      console.log(data)
      data.hover = true
    },
    mouseoutExample(e, data) {
      data.hover = false
    }
  },
 
}
</script>
<style lang="less" scoped>

.marquee_left {
   transition: all 0.5s;
   margin-left: -410px;
}
.marquee_right {
   transition: all 0.5s;
   margin-left: 410px;
}

.dashboard{
  .title{
    text-align:center;
    color:@color3;
    font-size: 44px;
    padding:80px 0 60px;
    // margin-left:-2000px;
  }
  .section1{
    padding-bottom:80px;
    .card{
      width: 268px;
      height: 364px;
      background: #ffffff;
      border: 1px solid #e8ebf2;
      border-radius: 12px;
      box-shadow: 0px 2px 34px 0px rgba(232,235,242,0.50);
      padding:33px 18px 52px;
      font-size: 16px;
      color:@color6;
      &-title{
        margin:54px 0 14px;
        font-weight: bold;
        color: @color3;
      }
      &-text{
        text-align: center;
      }
    }
  }
  .section2{
    background: #f6faff;
    .tab{
      text-align:center;
      font-size: 22px;
      &-text{
        height:61px;line-height:61px;
      }
    }
  }
  .section3{
    padding-bottom: 45px;
    .example{
      width:100%;
      position: relative;
      &-box{
        width:100%;
        overflow: hidden;
        &-con{
          margin-left:-410px;
        }
      }
      .toggle-btn{
        width:1429px;
        position: absolute;
        left:-114px;
        top:211px;
      }
      .card{
        
        width: 381px;
        height: 468px;
        background: #ffffff;
        border: 1px solid #e8ebf2;
        border-radius: 16px;
        box-shadow: 0px 2px 34px 0px rgba(232,235,242,0.50);
        margin-right:28px;
        &-con{
          padding:20px;
          font-size: 16px;
          color:@color3;
          &-title{
            // padding:0 0 10px;
          }
          .company-logo{
            border: 1px solid #e8ebf2;
            border-radius: 8px;
            margin-top:10px;
            overflow:hidden;
            padding:4px;
          }
          
        }
        .imgBox{
          position:relative;
          width:381px;
          height:316px;
          overflow:hidden;
          &-animate{
            width:100%;
            height:100%;
            
            transition:all 0.5s;/*图片放大过程的时间*/
            &:hover{
              transform: scale(1.1);  /*以y轴为中心旋转*/
            }
          }
          
          .player-btn{
            position:absolute;
            top:120px;
            left:163px;
          }
          .example-img{
            //  transition:all 0.5s;/*图片放大过程的时间*/
            //  &:hover{
            //   transform: scale(1.1);  /*以y轴为中心旋转*/
              
            // }
          }
            
          
        }
      }
    }
    .video-box{
      margin-top:48px;
      position: relative;
      .close-video{
        position: absolute;
        top:60px;
        right:30px;
        z-index: 30;
      }
      .video-js{
        width:1142px;
        height:675px;
        position:absolute;
        top:60px;
        left:28px;
      }
      
    }
    
  }
  .section4{
    background: #f6faff;
    padding-bottom:80px;
    .title-other{
      font-size: 18px;
      color:@color3;
      text-align: center;
      padding:20px 0 60px;
      margin-top:-60px;
    }
    .demo-ruleForm{
      width:1200px;
      height:490px;
      background: #ffffff;
      border-radius: 16px;
      padding-top:28px;
      .form-box{
        .formCon{
          width:380px;
          margin-right:51px;
        }
        .customer{
          width: 256px;
          height: 326px;
          box-shadow: 0px 2px 34px 0px rgba(232,235,242,0.50); 
        }
        
      }
      .registerBtn{
          width: 200px;
          height: 50px;
          line-height: 50px;
          background: #308ee6;
          border-radius: 62px;
          font-size: 18px;
          color: #ffffff;
          text-align: center;
          margin-top:26px;
        }
    }
  }
}
</style>

